import React from 'react'
import { useHistory } from 'react-router-dom'
// ================================================================ Image
import Bcimg from '@img/suggest/bcimg.png'
// ================================================================ Css
import '@css/suggest.css'
// ================================================================ window 
const { $fn } = window
// ================================================================ Data
/* --------------------------- View --------------------------- */
let formData = {}
const List = ({title,type,titleId,index,options,label,model,onClick,value}) =>{
	function radioChanged(e, titleId, value) {
		const { checked } =e.target
		if (checked) {
			formData = {...formData, [titleId]: value}
		} else {
			formData = {...formData, [titleId]: ''}
		}
	}
	function checkChanged(e, titleId, value, i) {
		const { checked } =e.target
		if (checked) {
			formData[titleId].push(value)
		} else {
			const index = formData[titleId].findIndex(v => v === value)
			formData[titleId].splice(index, 1)
		}
		formData[titleId]?.sort()
	}
	
	
	return(
		<div>
			<h5 className='b'>{`${index+1}. ${title}`}</h5>
			<div className='f14'>
				{type==='多选'?
					(<div className='rel p10 '>
						{
							options.map((v,i)=>{
								formData[titleId] = []
								return (
									<div className='mb5 fxt' key={i + titleId}>
										<span className='check'><input type='checkbox' name={titleId} id={v.id} onChange= { e => checkChanged(e, titleId, v.option_mark, i) } /><label htmlFor={v.id}></label></span>
										<label htmlFor={v.id}><span className='lh20'>{v.option_value}</span></label>
									</div>	
								)
							})
						}
					</div>):
				type==='单选'?
					(<div className='rel p10'>
						{
							options.map((v,i)=>{
								return (
									<div className='mb5 fxt' key={ i + titleId}>
										<span className='radio'><input onChange= { e => radioChanged(e, titleId, v.option_mark) } type='radio' name={titleId} id={v.id} /><label htmlFor={v.id}></label></span>
										<span className='lh20' ><label htmlFor={v.id}>{v.option_value}</label></span>
									</div>	
								)
							})
						}
					</div>
					):null
				}
			</div>
		</div>
	)
}
const Index = ( ) => {
	const [ qs, setQs ] = React.useState( [] )
	const [ remark, setRemark ] = React.useState( {} )
	const history = useHistory( )
	React.useEffect(()=>{
		window.$http.pull(this,'question/getlist',{ loading:true }).then(data=>{
			setQs(data)
		})
		window.$http.pull(this,'question/getremark',{ loading:true }).then(data=>{
			console.log(data)
			setRemark(data)
		})
	}, [ history ])
	return (
		<>
			<div className='wh plr10 fv pb10' style={{background:`url(${Bcimg}) no-repeat top center/100%`, paddingTop:'42%', backgroundColor:'#2890cf'}}>
				<div className='ex rel'>
					<div className='abs_full bcf r8px p10 oys' >
						{qs.length === 0 ? 'loading...' : qs.map((v,i)=>{
								return <List title={v.title} type={v.type} titleId={v.id} index={i} options={v.options} key={i} />
						})}
						<div className='fxmc ptb15'>
							<button className='cf r20px h40 f15' style={{width:'180px',background:'#1283c9'}} 
								onClick={()=>{
									let isEmpty = false
									for(let key in formData){
										if(Array.isArray(formData[key]) && formData[key].length === 0){
											isEmpty = true
										}
									}
									if(isEmpty || (qs.length !== Object.keys(formData).length) ){
										window.$fn.toast('请填写所有问题')
									}else{
										window.$http.post(null,'proposal/getproposal',{param:{result: formData},loading:true}).then((data)=>{
											history.push(`/cause-suggest`)
											$fn.local('suggest',data)
											formData = {}
										})
									}
								}}
							>提交</button>
						</div>
						<div className='r5px lh20 p10 f12' style={{minHeight:80, background:'#f6f8f7' }} >
							<b>备注：</b>
							<p style={{color:'#1283c9'}}>{remark.remark1}</p>
							<p style={{color:'#fc8c38'}} >{remark.remark2}</p>
							
						</div>
					</div>
				</div>
				
			</div>
		</>
	)
}
export default Index